<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审批流程</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/ssmzy05/static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/ssmzy05/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/ssmzy05/static/css/index.css">
    <style>
        #button-div {
            margin-left: 55px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="button-div">
        <el-button type="primary" @click="MyInitExamineFlowDetail(0)">待审核</el-button>
        <el-button type="success" @click="MyInitExamineFlowDetail(2)">已通过</el-button>
        <el-button type="danger" @click="MyInitExamineFlowDetail(3)">未通过</el-button>
    </div>
    <el-table
            :data="examineFlowDetail"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题"
                width="200">
        </el-table-column>
        <el-table-column
                prop="purchaseApplyId"
                label="申请单号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="applyType"
                label="申请类型"
                width="200">
        </el-table-column>
        <el-table-column
                prop="examineLink"
                label="审批环节"
                width="100">
        </el-table-column>
        <el-table-column
                prop="startTime"
                label="开始时间"
                width="120">
        </el-table-column>
        <el-table-column
                prop="username"
                label="审批人"
                width="100">
        </el-table-column>
        <el-table-column
                prop="examineOpinion"
                label="申请建议"
                width="300">
        </el-table-column>
        <el-table-column
                prop="examineTime"
                label="审批时间"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <!--                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                <el-button type="text" size="small"
                           @click="updatePopUpWindowExamineForm(scope.row.id,scope.row.purchaseApplyId)">编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--    修改审批流程-->
    <el-dialog title="收货地址" :visible.sync="examineDialogFormVisible" :before-close="cancelPopUpWindow">
        <el-form :model="examineForm">
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="examineForm.title" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="单号" :label-width="formLabelWidth">
                <el-input v-model="examineForm.purchaseApplyId" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="申请类型" :label-width="formLabelWidth">
                <el-input v-model="examineForm.applyType" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="审批环节" :label-width="formLabelWidth">
                <el-input v-model="examineForm.examineLink" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-date-picker type="date" :disabled="true" v-model="examineForm.startTime" autocomplete="off"></el-date-picker>
            </el-form-item>
            <el-form-item label="审批人" :label-width="formLabelWidth">
                <el-input v-model="examineForm.username"  :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="申请建议" :label-width="formLabelWidth">
                <el-input v-model="examineForm.examineOpinion" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="审批时间" :label-width="formLabelWidth">
                <el-date-picker type="date" v-model="examineForm.examineTime" :disabled="true"
                                autocomplete="off"></el-date-picker>
            </el-form-item>
            <el-form-item label="操作" :label-width="formLabelWidth">
                <el-radio v-model="examineForm.status" label="3">未通过</el-radio>
                <el-radio v-model="examineForm.status" label="2">通过</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelPopUpWindow">取 消</el-button>
            <el-button type="primary" @click="onCommit">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            examineFlowDetail: [],
            examineDialogFormVisible: false,
            examineForm: {
                id: '',
                title: '',
                purchaseApplyId: '',
                applyType: '',
                examineLink: '',
                startTime: '',
                username: '',
                examineOpinion: '',
                examineTime: '',
                status:0
            },
            formLabelWidth: '120px',
        },
        methods: {
            MyInitExamineFlowDetail(status) {
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/examineFlowDetail/listAll/"+status,
                    dataType: "json",
                    success: function (resp) {
                        vue.examineFlowDetail = resp;
                    }
                })
            },
            updatePopUpWindowExamineForm(id, paId) {
                let vue = this;
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/ssmzy05/examineFlowDetail/query/" + id,
                    dataType: "json",
                    success: function (resp) {
                        vue.examineForm.id = resp.id;
                        vue.examineForm.title = resp.title;
                        vue.examineForm.purchaseApplyId = resp.purchaseApplyId;
                        vue.examineForm.applyType = resp.applyType;
                        vue.examineForm.examineLink = resp.examineLink;
                        vue.examineForm.startTime = resp.startTime;
                        vue.examineForm.username = sessionStorage.getItem("username");
                        vue.examineForm.examineOpinion = resp.examineOpinion;
                        vue.examineForm.examineTime = new Date();
                        vue.examineDialogFormVisible = true;
                    }
                })
            },
            cancelPopUpWindow(){
                let vue = this;
                vue.examineForm.id = '';
                vue.examineForm.title = '';
                vue.examineForm.purchaseApplyId = '';
                vue.examineForm.applyType = '';
                vue.examineForm.examineLink = '';
                vue.examineForm.startTime = '';
                vue.examineForm.username = '';
                vue.examineForm.examineOpinion = '';
                vue.examineForm.examineTime = '';
                vue.examineDialogFormVisible = false;
            },
            onCommit(){
                let vue = this;
                $.ajax({
                    type: "put",
                    url: "http://localhost:8080/ssmzy05/examineFlowDetail/update",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(vue.examineForm),
                    success: function (resp) {
                        if (resp.code == 200) {
                            vue.$message({
                                type: 'success',
                                message: resp.message
                            });
                            vue.MyInitExamineFlowDetail();
                            vue.examineDialogFormVisible = false;
                        } else {
                            vue.$message.error(resp.message);
                        }
                    }
                })
            }
        },
        mounted() {
            this.MyInitExamineFlowDetail(0);
        }
    })
</script>
</body>
</html>